<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html, body {
			width: 100%;
			height: 100%;
		}

		.box {
			width: 100%;
			height: 100%;
			background: url("images/f1_1.jpg") no-repeat top center;
			background-size: cover;
			position: relative;
		}

		.cloud img {
			position: absolute;
			left: 50%;
		}

		.cloud img:nth-child(1) {
			top: 20px;
			margin-left: -260px;

			animation: cloud 2s linear infinite alternate;
		}

		.cloud img:nth-child(2) {
			top: 100px;
			margin-left: 380px;

			animation: cloud 2.5s linear infinite alternate;
		}

		.cloud img:nth-child(3) {
			top: 200px;
			margin-left: -560px;

			animation: cloud 3s linear infinite alternate;
		}

		.balloon {
			position: absolute;
			left: 50%;
			top: 20%;
			margin-left: -340px;
			animation: balloon 2s linear alternate infinite;
			/* 动画实际上具有的全部属性 */
			/* animation: name duration timing-function delay iteration-count direction fill-mode; */
		}

		.giraffe {
			position: absolute;
			left: 50%;
			margin-left: 160px;
			top: 15%;
		}

		.text {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			animation: text 1s linear forwards;
		}

		.jump_text img {
			position: absolute;
			left: 50%;
			bottom: 42px;
		}

		.jump_text img:nth-child(1) {
			margin-left: -390px;
			animation: jump_text 1s linear infinite alternate;
		}

		.jump_text img:nth-child(2) {
			margin-left: -180px;
			animation: jump_text 1.2s linear infinite alternate;
		}

		.jump_text img:nth-child(3) {
			margin-left: 35px;
			animation: jump_text 1.4s linear infinite alternate;
		}

		.jump_text img:nth-child(4) {
			margin-left: 240px;
			animation: jump_text 1.6s linear infinite alternate;
		}

		/* 白云动画 */
		@keyframes cloud {
			0% {
				transform: translateX(0px);
			}

			100% {
				transform: translateX(40px);
			}
		}

		/* 热气球动画 */
		@keyframes balloon {
			0% {
				transform: translateY(0px);
			}

			100% {
				transform: translateY(-50px);
			}
		}

		/* 跳动文字 */
		@keyframes jump_text {
			0% {
				transform: translateY(0px);
			}

			100% {
				transform: translateY(-10px);
			}
		}

		/* 文字 */
    /* 注意：因为transform是复合属性，所以我们要重新申明一遍translate */
		@keyframes text {
			0% {
				transform-origin: left top;
				transform: scale(0) translate(-50%, -50%);
			}

			50% {
				transform-origin: left top;
				transform: scale(1) translate(-50%, -50%);
			}

			70% {
				transform-origin: left top;
				transform: scale(0.8) translate(-50%, -50%);
			}

			100% {
				transform-origin: left top;
				transform: scale(1) translate(-50%, -50%);
			}
		}
	</style>
</head>

<body>
	<div class="box">

		<!-- 白云 -->
		<div class="cloud">
			<img src="images/yun1.png">
			<img src="images/yun2.png">
			<img src="images/yun3.png">
		</div>

		<!-- 热气球 -->
		<div class="balloon">
			<img src="images/san.png">
		</div>

		<!-- 长颈鹿 -->
		<div class="giraffe">
			<img src="images/lu.png">
		</div>

		<!-- 文字 -->
		<div class="text">
			<img src="images/font1.png">
		</div>

		<!-- 跳动文字 -->
		<div class="jump_text">
			<img src="images/1.png">
			<img src="images/2.png">
			<img src="images/3.png">
			<img src="images/4.png">
		</div>



	</div>
</body>

</html>